{% extends "User_panel/base_user_panel.html" %}
{% block script %}
    <script type="text/javascript" src="/site_media/js/user-panel.js"></script>
{% endblock %}
{% block panel-content %}
    <div id="center">
        <span class="delivery-address-title">My Delivery Addresses</span>
        <div id="my-delivery-address">
            <p></p>
            {% if my_addresses %}
                {% for my_address in my_addresses %}
                    <p id="my-address-{{my_address.id}}">
                        "{{my_address.name}},&nbsp;{{my_address.address}},&nbsp;{{my_address.postnumber}},&nbsp;{{my_address.city}},&nbsp;
                        {% if my_address.state %}
                            {{my_address.state}}
                        {% endif %}
                        {{my_address.country}},&nbsp;{{my_address.phone}}"
                        <br>
                        <input type="button" value="Modify" onclick="modify_address({{my_address.id}})" />
                        <input type="button" value="Delete" onclick="delete_address({{my_address.id}})" />
                    </p>
                {% endfor %}
            {% else %}
                <p id="empty-address"><b>You do not have any addresses!</b></p>
            {% endif %}
        </div>
        <div id="delivery-address">
            <span class="delivery-address-title">Add/Modify delivery address</span>
            <form method="post" action="javascript: add_address()" id="delivery-address-form">{% csrf_token %}
                <table id="delivery-address-table">
                    <tr>
                        <td colspan=4>
                            <label for="id_consignee">*Consignee</label>
                            <br>
                            {{form.consignee}}
                        </td>
                    </tr>
                    <tr>
                        <td colspan=4>
                            <label for="id_street_address">*Street Address:</label>
                            <br>
                            {{form.street_address}}
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="id_postal_code">*Postal Code:</label>
                            <br>
                            {{form.postal_code}}
                        </td>
                        <td>
                            <label for="id_city">*city:</label>
                            <br>
                            {{form.city}}
                        </td>
                        <td>
                            <label for="id_state">State:</label>
                            <br>
                            {{form.state}}
                        </td>
                        <td>
                            <label for="id_country">*Country:</label>
                            <br>
                            {{form.country}}
                        </td>
                    </tr>
                    <tr>
                        <td colspan=3>
                            <label for="id_phone">*Mobile Phone:</label>
                            <br>
                            {{form.phone}}
                        </td>
                        <td>
                            <input type="hidden" value="" id="address_id" />
                        </td>
                    </tr>
                </table>
                <input type="submit" value="Save" />
            </form>
        </div>
    </div>
{% endblock %}